{% extends 'base.html' %} {% block css%}
<style type="text/css">
#temp, #humi {
	font-weight: bolder;
}

.green{
	color: #5cb85c;
}

.gray{
	color: #ccc;
}

</style>
{% endblock %} {% block body%}
<div class="row">
    <div class="col-md-4">

	  	<h4>MQTT服务器 &nbsp;&nbsp; <span id='iot_status' class="gray"><i class="glyphicon glyphicon-off"></i></span></h4>
			<table class="table table-hover table-condensed form-inline">
		
				<tr>
					<td>地址</td>
					<td><input type="text" style="width:140px; height:30px" id="address_val" placeholder="118.31.36.131"></td>
				</tr>
				<tr>
					<td>端口</td>
					<td><input type="text" style="width:140px; height:30px" id="port_val" placeholder="1883"></td>
				</tr>

				<tr>
					<td colspan="2">
						<button class="btn btn-primary" id="btn_set_mqtt_server_settings">
						保存
						</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<button class="btn btn-success" id="btn_get_mqtt_server_settings">
						加载
						</button>
					</td>
				</tr>
			</table>
			

			<h4>组件</h4>
			<table class="table table-hover table-condensed form-inline">
		
				<tr>
					<td>主题名称</td>
					<td><input type="text" style="width:140px; height:30px" id="sub_name" placeholder="Kzeng-Pub-Temp"></td>
				</tr>
				<tr>
					<td>范围最小值</td>
					<td><input type="text" style="width:140px; height:30px" id="min_val" value="0"></td>
				</tr>
				<tr>
					<td>范围最大值</td>
					<td><input type="text" style="width:140px; height:30px" id="max_val" value="60"></td>
				</tr>
				<tr>
					<td>颜色</td>
					<td><input type="text" style="width:140px; height:30px" id="color_val" value="#FF0000"></td>
				</tr>


				<tr>
					<td colspan="2">
						<button class="btn btn-primary" id="btn_add_component_settings">
						增加 <i class="glyphicon glyphicon-plus"></i>
						</button>
					</td>
				</tr>
			</table>			

    </div>
    <div class="col-md-4">

		<h4>订阅</h4>
		<table class="table table-hover table-condensed form-inline">
			<tr>
				<td>
					<button class="btn btn-success" id="btn_subscribe">
					订阅 <i class="glyphicon glyphicon-bell"></i>
					</button>
				</td>
			</tr>
		</table>
		
		
    </div>
    <div class="col-md-4">
		<h4>温度</h4>
		<table class="table table-hover table-condensed form-inline">
	
			<tr>
				<td><h1><span id="temp"></span></span> &nbsp;&nbsp;<small>°C</small></h1></td>
			</tr>

		</table>
		
		<h4>湿度</h4>
		<table class="table table-hover table-condensed form-inline">
	
			<tr>
				<td><h1><span id="humi"></span></span> &nbsp;&nbsp;<small>%</small></h1></td>
			</tr>

		</table>

    </div>
</div>

{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">



$(document).ready(function() {

	iot_get_info();
    // btn_get_mqtt_server_settings();


	$("#btn_get_mqtt_server_settings").click(function(){
		$.post(
					"api/get_mqtt_server_settings", {
					},
					function(data, status) {
						console.log(data)
						d = JSON.parse(data);
							$.each(d,function(index,value){
								$("#"+ index).val(value);		
							});
						toastr["success"]("已加载.");
					}
				);
	});


    $("#btn_set_mqtt_server_settings").click(function(){
		address_val = $("#address_val").val();
		port_val = $("#port_val").val();
		$.post(
			"api/set_mqtt_server_settings", {
				address_val: address_val,
				port_val: port_val,
			},
			function(data, status) {
				console.log(data)            
				toastr["success"]("数据已设置.");
			}
	);
	});

	
	
    $("#btn_add_component_settings").click(function(){
		sub_name = $("#sub_name").val();
		min_val = $("#min_val").val();
		max_val = $("#max_val").val();
		color_val = $("#color_val").val();

		$.post(
			"api/btn_add_component_settings", {
				sub_name: sub_name,
				min_val: min_val,
				max_val: max_val,
				color_val: color_val
			},
			function(data, status) {
				console.log(data)            
				toastr["success"]("数据已设置.");
			}
	);
	});


	$("#btn_subscribe").click(function(){

		$.post(
			"api/btn_subscribe", {
			},
			function(data, status) {
				console.log(data)            
				toastr["success"]("订阅.");
			}
	);
	});
	



function iot_get_info()
{
    $.post(
            "api/iot_get_info", {
            },
            function(data, status) {
                console.log("data: " + data);
				// toastr["success"]("数据已刷新.");
				d = JSON.parse(data);
						$.each(d,function(index,value){
							if(index == 'iot_status')
							{
								if(value == 0) //disconnect
								{
									$('#' + index).addClass('gray');
									$('#' + index).removeClass('green');
								}
								else
								{
									console.log('add class green ...');
									$('#' + index).addClass('green');
									$('#' + index).removeClass('gray');
								}
							}
							else
							{
								$("#"+ index).html(value);	
							}
								
						});

                t = setTimeout(iot_get_info, 2000);
            }
        );
}



});

</script>
{% endblock %}